<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('百度ECharts')" />
	<th:block th:include="include :: bootstrap-select-css" />
</head>
<body class="gray-bg">
	<div class="row  border-bottom white-bg dashboard-header">
		<div class="select-list">
			<ul>
				<li></li>
				<li></li>
				<li>年份：<select id="year" class="selectpicker show-tick "
					data-live-search="true" data-none-selected-text="年份">
						<option></option>
						<option>2019</option>
						<option>2020</option>
						<option>2021</option>
						<option>2022</option>
						<option>2023</option>
						<option>2024</option>

				</select>
				</li>

				<li>月份：<select id="month" class="selectpicker show-tick "
					data-live-search="true" data-none-selected-text="月份">
						<option></option>
						<option value="01">01</option>
						<option value="02">02</option>
						<option value="03">03</option>
						<option value="04">04</option>
						<option value="05">05</option>
						<option value="06">06</option>
						<option value="07">07</option>
						<option value="08">08</option>
						<option value="09">09</option>
						<option value="10">10</option>
						<option value="11">11</option>
						<option value="12">12</option>	
				</select>
				</li>
				
				 <li>校区：<select id="school" class="selectpicker  "
					data-live-search="true" data-none-selected-text="校区">
						<option></option>
						<option></option>
						<option  th:each="school:${schoolList}"
							th:value="${school.id}" th:text="${school.schoolName}"></option>
				</select>
				</li> 

				

				<li><a class="btn btn-primary btn-rounded btn-sm"
					id="btnSearch"><i class="fa fa-search"></i>&nbsp;搜索</a>
					
				</li>
			</ul>
		</div>
	</div>
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row" >
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>折线图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-line-chart" style="height: 600px"></div>
                    </div>
                </div>
            </div>
            
        </div>
        
        
        
        
 <!-- <div id="main" style="width: 600px;height:400px;"></div> -->
        
        
        
        
        
        
        
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: echarts-js" />
    <th:block th:include="include :: bootstrap-select-js" />
    <script type="text/javascript">

    	var lineChart = echarts.init(document.getElementById("echarts-line-chart"));
	    $(function () {	        
	        var lineoption = {
	            title : {
	                text: '交易额'
	            },
	            tooltip : {
	                trigger: 'axis'
	            },
	            legend: {
	                data:['交易额']
	            },
	            grid:{
	                
	                top:'3000'
	                
	            },
	            calculable : true,
	            xAxis : [
	                {
	                    type : 'category',
	                    boundaryGap : false,
	                    data : [0, 0, 0, 0, 0, 0, 0]
	                }
	            ],
	            yAxis : [
	                {
	                    type : 'value',
	                    axisLabel : {
	                        formatter: '{value} 元'
	                    }
	                }
	            ],
	            series : [
	                
	                {
	                    name:'交易额',
	                    type:'line',
	                    data:[0, 0, 0, 0, 0, 0, 0],
	                    markPoint : {
	                        data : [
      	                            {type : 'max', name: '最大值'},
      	                            {type : 'min', name: '最小值'}
      	                        ]
	                    },
	                    markLine : {
	                        data : [
	                            {type : 'average', name : '平均值'}
	                        ]
	                    }
	                }
	            ]
	        };
	        lineChart.setOption(lineoption);
	        $(window).resize(lineChart.resize);
	        window.onresize = function () {
	        	lineChart.resize();
	        }	
	    });
	    
	    
	    var prefix = ctx + "Information/moneyInformation";
	    $(document).ready(function () {
            $("#btnSearch").click(function () {                                
                $.ajax({
                    dataType: "json",                    
                    type: "get",
                    url: prefix  +  "/search",
                    data:"year="+$("#year").val()+"&month="+$("#month").val()+"&school="+$("#school").val()+"&flag="+$("#flag").val(),
                    success: function (res) {
                    	/* if(res){
                    		var jsonData = JSON.stringify(res);                    		                    	
                    		alert(jsonData);                    		                   		
                    	} */
                    	lineChart.clear();
                    	lineChart.setOption({
                    		title : {
            	                text: '交易额'
            	            },
            	            tooltip : {
            	                trigger: 'axis'
            	            },
            	            legend: {
            	                data:['交易额']
            	            },
            	            grid:{
            	                
            	                top:'3000'
            	                
            	            },
            	            calculable : true,
                    		xAxis : {
                    			type : 'category',
        	                    boundaryGap : false,
        	                    data : res.dateX
                            },
                            yAxis : [
                 	                {
                 	                    type : 'value',
                 	                    axisLabel : {
                 	                        formatter: '{value} 元'
                 	                    }
                 	                }
                 	            ],
                            series : [
                  	               
                  	                {
                  	                    name:'交易额',
                  	                    type:'line',
                  	                    data:res.monthY,
                  	                    markPoint : {
                  	                    	data : [
                      	                            {type : 'max', name: '最大值'},
                      	                            {type : 'min', name: '最小值'}
                      	                        ]
                  	                    },
                  	                    markLine : {
                  	                        data : [
                  	                            {type : 'average', name : '平均值'}
                  	                        ]
                  	                    }
                  	                }
                  	            ]
                        });
                    },
                    error: function (e) {
                        //失败执行
                        alert("请输入正确的数据时间");
                    }
                });
            });
         });
	    
	    $("#school").selectpicker('deselectAll');
    </script>
</body>
</html>